<template>
<div style="height:100%">
  <div class="buttonarea">
    <div>
       <el-button  v-show='tip' type="primary" @click="addlead" style="    position: relative;
    float: right;
    top: 20px;margin-right: 20px;">新建线索</el-button>    
    </div> 
    <!-- <el-radio-group v-model="radio" style="margin:12px">
    <el-radio :label="2">企业</el-radio>
    <el-radio :label="1">个人</el-radio>
  </el-radio-group>
  <el-select v-model="value" placeholder="意向水平" >
      <el-option label="选择意向水平" value="0"></el-option>

      <el-option label="高" value="1"></el-option>
      <el-option label="普通" value="2"></el-option>
  </el-select>
  <div>
  <el-input placeholder="请输入内容" v-model="input5" class="input-with-select" style="margin:12px">
      <el-select v-model="select" slot="prepend" placeholder="请选择">
       <el-option label="选择搜索条件" value="0"></el-option>

      <el-option label="姓名" value="1"></el-option>
      <el-option label="电话" value="2"></el-option>
      <el-option label="单位名称" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search" @click="gosearch"></el-button>
 

  </el-input>
  </div> -->
  </div>
  <!-- <div>
  <el-table
    :data="tableData"
    stripe
    height="100%"
    border
    style="width: 98%;margin-left: 1%;">
    <el-table-column
      prop="created"
      label="创建时间"
      width="100">
    </el-table-column>
    <el-table-column
      prop="username"
      label="联系人"
      width="100">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="联系电话">
    </el-table-column>
    <el-table-column
      prop="companyname"
      label="单位名称">
    </el-table-column>
     <el-table-column
      prop="website"
      label="公司官网">
    </el-table-column>
     <el-table-column
      prop="addr"
      label="所在地区">
    </el-table-column>
    <el-table-column
      prop="addr2"
      label="联系地址">
    </el-table-column>
    <el-table-column
      prop="password"
      label="线索类型">
    </el-table-column>
     <el-table-column
      prop="tag"
      label="标签"
      width="100"
      :filters="[{ text: '抢单成功', value: 1 }, { text: '待抢单', value: 0 }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.owntag === 1 ? 'primary' : 'success'"
          disable-transitions>{{scope.row.owntag==1?'抢单成功':'待抢单'}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
      <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button
          @click.native.prevent="lockmember(scope.row.id,scope.row.index)"
          type="text"
          size="small" v-if="scope.row.owntag === 0">
          立即抢单
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  </div> -->
  <!-- 
  </div> -->
<div >

  <el-table
  :default-sort = "{prop: 'creatime'}"
   @sort-change="sorttab"
    :data="tableData"
    style="width: 100%"
     max-height="600">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <!-- <el-form-item label="联系电话">
            <span>{{ props.row.phone }}</span>
          </el-form-item> -->
              <el-form-item label="需求说明" style="width:80%;">
            <span>{{ props.row.comment }}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.manname" label="联系人1">
            <span>{{ props.row.manname }}</span>
          </el-form-item>
           <el-form-item  v-if="props.row.phone"  label="电话">
            <span>{{ props.row.phone}}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.work"  label="职位">
            <span>{{ props.row.work }}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.weixinhao"  label="微信号">
            <span>{{ props.row.weixinhao }}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.manname2"  label="联系人2">
            <span>{{ props.row.manname2 }}</span>
          </el-form-item>
           <el-form-item   v-if="props.row.phone2"  label="电话">
            <span>{{ props.row.phone2}}</span>
          </el-form-item>
          <el-form-item   v-if="props.row.manname2"  label="职位">
            <span>{{ props.row.work2 }}</span>
          </el-form-item>
          <el-form-item   v-if="props.row.weixinhao2"  label="微信号">
            <span>{{ props.row.weixinhao2 }}</span>
          </el-form-item>
          <el-form-item v-if="props.row.manname3" label="联系人3">
            <span>{{ props.row.manname3 }}</span>
          </el-form-item>
           <el-form-item  v-if="props.row.manname3"  label="电话">
            <span>{{ props.row.phone3}}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.work3"  label="职位">
            <span>{{ props.row.work3 }}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.weixinhao3"  label="微信号">
            <span>{{ props.row.weixinhao3 }}</span>
          </el-form-item>

            <el-form-item v-if="props.row.customertype!=1&&props.row.hangye"  label="企业所属行业">
            <span>{{ props.row.hangye }}</span>
          </el-form-item>
           <el-form-item  v-if="props.row.customertype!=1&&props.row.yewu" label="企业主营业务">
            <span>{{ props.row.yewu}}</span>
          </el-form-item>
          <el-form-item v-if="props.row.customertype!=1&&props.row.guimo"  label="规模">
            <span>{{ props.row.guimo}}</span>
          </el-form-item>
          <el-form-item v-if="props.row.customertype!=1&&props.row.website"  label="企业官网">
            <span>{{ props.row.website }}</span>
          </el-form-item>
          <el-form-item v-if="props.row.customertype!=1&&props.row.gzh"  label="企业公众号">
            <span>{{ props.row.gzh }}</span>
          </el-form-item>

          <el-form-item v-if="props.row.username" label="客户名称">
            <span>{{ props.row.username }}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.addr"  label="所在地区">
            <span>{{ props.row.addr }}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.addr2"  label="联系地址">
            <span>{{ props.row.addr2 }}</span>
          </el-form-item>
          <!-- <el-form-item label="线索类型">
            <span>{{ props.row.type==1?'系统推荐':'自建'}}</span>
          </el-form-item> -->
          <el-form-item label="创建时间">
            <span>{{ getNowFormatDate(props.row.created) }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
    fixed
     align="center"
      label="线索编号"
      prop="id">
    </el-table-column>
    <el-table-column
  sortable="custom"
    fixed
     align="center"
      label="客户名称"
      prop="username">
    </el-table-column>
    <el-table-column
    fixed
     align="center"
      label="联系人"
      prop="manname">
    </el-table-column>
    <el-table-column
    fixed
     align="center"
      label="联系电话"
      prop="phone">
    </el-table-column>
    <el-table-column
    fixed
     align="center"
      label="意向产品"
      prop="health">

      <!-- 当前状态：包括：新线索、已有人跟进（状态1-5、7）、已成单（状态6） -->
    </el-table-column>
        <el-table-column
        sortable='custom'
         align="center"
         prop="status"
    fixed
      label="当前状态" 
    >
    <template slot-scope="scope">
      <span v-if="scope.row.status==0">新线索</span>
      <span v-if="scope.row.status==2">已有人跟进</span>
      <span v-if="scope.row.status==3">已成单</span>
            <span v-if="scope.row.status==1">已有人跟进</span>


      </template>
    </el-table-column>
    <el-table-column
    sortable='custom'
    fixed
     align="center"
      label="创建时间"
      :formatter="getNowFormatDate2"
      prop="created">
    </el-table-column>
    <el-table-column
     align="center"
    fixed
      label="操作"
      width="120">
      <template slot-scope="scope"   v-if="scope.row.owntag==0">
        <el-button  type="text"
      
        @click="editlead(scope.row.id)"
          size="small" >
          编辑
        </el-button>
        <el-button @click="dellead(scope.row.id,scope.row.$index)"  type="text"
          size="small" >
          删除
        </el-button>
      </template>
    </el-table-column>
 
  </el-table>


 <div class="block">
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="10"
      background
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>  

  </div>

  


  </div>
</template>

<script>
import {delpossiblemember, getmypossiblemembers,lockmember } from '@/api/policy'

export default {
  name: 'leadmg',
  components: { },
    computed: {
  },
  data() {
    return {
      tip:false,
      manname:'',
      available:'',
      page:1,
      website:'',
      input5:'',
      select:'0',
      radio:1,
    tableData: [ ],
     total:0,
     searchtag:0,
     value:'0',
     inittag:0,
     sortname:null,
     sortorder:null

    }
      
  },
  components:{


  },
 deactivated(){
    
     this.inittag=0;
  
  },
  activated(){
    console.log('activate1')
    if(this.inittag==0)
    {
      console.log('active2:'+this.inittag)
    this.getpossiblemembers(0);
    }

  },
  mounted(){
      console.log('mounted1')
    this.inittag=1;
          console.log('mounted2')
  this.reset();
        console.log('mounted3')
  },
  methods:{
    sorttab(col,prop,order){
          console.log( col)
          if(col.prop)
          {
          this.sortname=col.prop;
          this.sortorder=col.order;
          this.reset();
          }
         
    },
editlead(id){
    this.$router.push("editlead?id="+id)
  },
  dellead(id,index){
     this.$loadingshow();
       delpossiblemember({ id:id }).then(res => {
         this.$loadingclose();
        if (res.code == 200) {
       this.$toast('删除成功')
       this.tableData.splice(index,1)
        } 
        else{
          this.$toast(res.message)
        }
      },err=>{
             this.$loadingclose();
      });
   },
 addlead(){
    this.$router.push("addlead")
  },
    getNowFormatDate2(row,colum) {
      var dt=row.created;
        var date = new Date(dt);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    },
      getNowFormatDate(dt) {
        var date = new Date(dt);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    },
    lockmember(id,index)
    {
        
     this.$loadingshow();
       lockmember({ id:id }).then(res => {
         this.$loadingclose();
        if (res.code == 200) {
       this.$toast('抢单成功')
       this.tableData[index].owntag=1;
        } 
        else{
          this.$toast(res.message)
        }
      },err=>{
             this.$loadingclose();
      });


    },
      reset()
    {
    this.page=1;
    this.total=0;
    this.searchtag=0;
    
    this.getpossiblemembers(1);



    },
    gosearch()
    {
    this.page=1;
    this.total=0;
    this.searchtag=1;
    this.getpossiblemembers(0);



    },
    getpossiblemembers(tag){

    this.$loadingshow();
       getmypossiblemembers({  page:this.page,size:10,sortname:this.sortname,sortorder:this.sortorder }).then(res => {
       this.$loadingclose();
       if (res.code == 200) {
              this.tip=true;
              this.tableData=res.result.list;
              // if(this.searchtag==0)
              // {
              //   localStorage.setItem('possiablemembers',JSON.stringify(this.tableData))
              //   this.available=70-res.message;
              //   if(this.available<=0)
              //   {
              //        this.$toast('刷新次数已达3次，明天再来刷新')
              //   }

              // }
              this.total=res.result.total;
              for(var i=0;i<this.tableData.length;i++)
              {
                   this.tableData[i].index=i;
                   this.tableData[i].typedesc=this.tableData[i].type==1?'重点':'普通'


              }
              //document.getElementsByClassName('el-table__body-wrapper')[0].style.height='auto';
        } 
        else{
          console.log('error')
          /*if(localStorage.getItem('possiablemembers') )
          {
          var cache= localStorage.getItem('possiablemembers');
 
          this.tableData=JSON.parse(cache);

              for(var i=0;i<this.tableData.length;i++)
              {
                 this.tableData[i].index=i;
                 this.tableData[i].typedesc=this.tableData[i].type==1?'重点':'普通'


              }


          }*/

          this.$toast(res.message)
        }
      });
    },
    
    filterTag(value,row){
return value===row.owntag;
    },
handleSizeChange(){
 console.log('size change')
},
handleCurrentChange(){
   this.getpossiblemembers(0);
  
},
handleClick(row) {
        console.log(row);
      },
  }
}
</script>

<style lang="scss" scoped>
.buttonarea{
  width:100%;
  height: 80px;
}
.btn{
  position: relative;
    /* left: 73%; */
    float: right;
    right: 9px;
    margin-top: 6px;
}
.block{
      text-align: center;
      margin-top:10px;
}

.documentation-container {
  // margin: 50px;
  .document-btn {
    float: left;
    margin-left: 50px;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    width: 200px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
   .popstyle{
        width: 100%;
        height: 30%;
    }
    .userfile{
    width: 90px;
    height: 30px;
    background: cornflowerblue;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
}
/deep/  .el-input--suffix .el-input__inner{
  width:140px;
}
/deep/ .el-form-item{
  width: 30%;
}
</style>
